<template>
  <!-- 文章详情模块 -->
  <div class="articlemodule clearfix">
    <div class="w">
      <!-- 文章左边 -->
      <div class="article-content">
        <div class="article-left clearfix">
          <main id="mdHtml"></main>
        </div>
      </div>
      <!-- 右边 -->
      <div class="article-right clearfix">
        <HotLabels></HotLabels>
      </div>
    </div>
  </div>
</template>

<script>
// 引入子组件
import HotLabels from "../components/HotLabels.vue";

export default {
  name: "ArticleDetails",
  components:{
    HotLabels,
  },
  async mounted() {
    console.log(this.$route.params.id);
    const id = this.$route.params.id;
    let { data } = await this.$axios({
      method: "GET",
      url: "/getdata/articleDetails",
      params: { id },
    });
    // console.log(data);
    if (data.code) {
      this.$message.error("您要查询的文章");
      // 回到文章页面
      this.$router.replace("/lifebeen");
    }

    // 发起请求，通过md文件地址得到文件数据
    let mdData = await this.$axios({
      method: "GET",
      url: data.data.mdUrl,
    });
    // console.log( data.data.mdUrl);
    editormd.markdownToHTML("mdHtml", {
      markdown: mdData.data, //md文件数据
    });
  },

  // 当这个文章详情的组件创建时，要得到后端的数据
  // created表示当前组件被创建时，会触发这个函数
  // created(){
  // 发起ajax请求，获取文章详情数据
  // this.$route.params; //获取动态路由id值
  //请求文章数据的地址/id
  // this.id = this.$route.params.id;
};
</script>

<style lang="less" scoped>
.articlemodule {
  margin-top: 70px;
  height: 100%;
}
.article-content {
  margin-right: 305px;
}
.article-left {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.editormd-preview-container, .editormd-html-preview{
  box-sizing: border-box;
}
.article-right{
  float: right;
  width: 290px;
  margin-left: -290px;

}
</style>